import React, { Component, PropTypes } from 'react';
import { Link } from 'react-router'
import Module from '../../lib/module'

import { Button, Row, Col, Input, Slider, Table, Breadcrumb, Tabs, Timeline, Icon } from 'antd';
import CarShow2D from "../carShow2D/"

const TabPane = Tabs.TabPane;


class CarDetailInfo extends Module {
    constructor(props, context) {
        super(props, context);
        this.state = {
            columns:[{
                title: '维修部位',
                dataIndex: 'repairPart'
            }, {
                title: '维修时间',
                dataIndex: 'repairTime'
            }, {
                title: '维修费用',
                dataIndex: 'repairCost'
            }, {
                title: '维修人员',
                dataIndex: 'repairPerson'
            }, {
                title: '联系方式',
                dataIndex: 'phone'
            }, {
                title: '操作',
                render: ()=>{
                    return (
                        <Button size="small">编辑</Button>
                    )
                }
            }],
            data: [{
                key: '1',
                number: '123456',
                repairPart: 'VR主机',
                repairTime: '2018年01月11日',
                repairCost: '¥3000.00',
                repairPerson: 'XXX',
                phone: '12312341234',

            }, {
                key: '2',
                number: '123456',
                repairPart: 'VR主机',
                repairTime: '2018年01月11日',
                repairCost: '¥3000.00',
                repairPerson: 'XXX',
                phone: '12312341234'
            }]
        }
    }

    componentDidMount() {
        console.log(this.props.location.query);

    }

    tableFooter = () => {
        return (
            <div style={{textAlign: 'right'}}>
                <div>
                    费用总计:
                    <span style={{fontSize: '20px', color: '#333', marginLeft: '10px'}}>¥ 10000.00</span>
                </div>
                <div>
                    维修次数:
                    <span style={{fontSize: '20px', color: '#333', marginLeft: '10px'}}>10次</span>
                </div>
            </div>
        )
    }


    render() {
        let { columns, data } = this.state;
        let { status, currentCar } = this.props.location.query;
        return <div className="N_car-detailInfo">

            <Breadcrumb className="N_Breadcrumb">
                <Breadcrumb.Item>车辆</Breadcrumb.Item>
                <Breadcrumb.Item><Link to="/CarBaseInfo">车辆基本信息</Link></Breadcrumb.Item>
                <Breadcrumb.Item>车辆详情</Breadcrumb.Item>
            </Breadcrumb>

            <CarShow2D
                status={status*1}
                currentCar={currentCar}
                speed={20}
            ></CarShow2D>

            <Tabs type="card" style={{margin: '0 20px'}}>
                <TabPane tab="编辑归属信息" key="1" style={{padding: '20px 40px'}}>

                    <Button type="primary" icon="plus" style={{marginBottom: '50px'}}>新增归属信息</Button>

                    <Timeline  className="N_Timeline">
                        <Timeline.Item
                            dot={
                                <div className="N_dot_defined">
                                    <div>2018</div>
                                    <div>08.12</div>
                                </div>
                            }
                        >
                            归属--滨江店
                        </Timeline.Item>
                        <Timeline.Item
                            dot={
                                <div className="N_dot_defined">
                                    <div>2018</div>
                                    <div>08.11</div>
                                </div>
                            }
                        >
                            归属--上城店
                        </Timeline.Item>
                    </Timeline>

                </TabPane>

                <TabPane tab="编辑维修信息" key="2" style={{padding: '20px'}}>
                    <Button type="primary" icon="plus" style={{marginBottom: '20px'}}>增加维修记录</Button>
                    <Table
                        columns={columns}
                        dataSource={data}
                        bordered
                        footer={ this.tableFooter }
                        onRow={(record, index)=> {
                            return {
                               onMouseEnter:()=>{

                               }
                            }
                        }}
                    />
                </TabPane>
            </Tabs>



        </div>
    }
}

export default CarDetailInfo;
